<template>
  <el-radio-group
    :size="size"
    :disabled="disabled"
    v-model="checkedVal">
    <el-radio
      v-for="item in optionsData"
      :key="item.dictCode"
      :label="item.dictValue">{{ item.dictLabel }}</el-radio>
  </el-radio-group>
</template>

<script>
import * as API_Dict from './api';

export default {
  name: 'DgDictRadio',
  model: {
    event: 'change'
  },
  // {size: 尺寸; disabled: 禁用; dictType: 字典类型;}
  props: ['value', 'size', 'disabled', 'dictType'],
  data () {
    return {
      checkedVal: this.value || this.value === 0 ? this.value.toString() : this.value,
      optionsData: []
    };
  },
  watch: {
    value (newVal) {
      let _val = newVal;
      if (newVal || newVal === 0) {
        _val = newVal.toString();
      };
      this.checkedVal = _val;
    },
    checkedVal (newVal) {
      let _val = newVal;
      if (this.multiple === undefined || typeof (_val) !== 'object') {
        if (_val || _val === 0) {
          _val = newVal.toString();
        };
      };
      this.$emit('change', _val);
    }
  },
  mounted () {
    this.remoteMethod();
  },
  methods: {
    /**
      * @date 2021/05/10
      * @author wolfMan
      * @description {获取数据源}
    */
    remoteMethod () {
      API_Dict.getDictsByType(this.dictType).then(response => {
        this.optionsData = response.data;
      });
    }
  }
};
</script>

<style type="text/scss" lang="scss">
.el-radio {
  margin-right: 20px;
}
</style>